<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
      <div>
      <!-- <a href="/vue路由器.html/index">首页</a>
      <a href="#">商品</a> -->
     
      <router-link to="/index">首页</router-link>
      <router-link to="/product">商品</router-link>

      <router-view></router-view>
      </div>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <!-- 1.安装vue-router路由
         2.引入vue-router文件 
         
         3.要根据不同url链接到不同的页面, 需要使用模板实现, 将模板绑定到对应的路由地址
    -->
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>


    <script type="text/javascript">
      let Index = Vue.component("index",{
        template: `<div>Hello,欢迎来到图灵商城!</div>`
      });

      let Product = Vue.component("product",{
        template: `<ul><li>1.Iphone11</li><li>2.小米11</li></ul>`
      });

      // 4.使用路由管理模板, 将url跟模板进行绑定
      const router = new VueRouter({
        routes: [{
          path: "/index",
          component: Index
         },
         {
          path: "/product",
          component: Product
         }]
      });

      var vm = new Vue({
        el: "#app",
        router
      });

    </script>
</body>
</html>